<template >
	<div class="contain-report">
		<div class="report-title">实验培训资源</div>
		<div class="report-search">
			<div></div>
      <el-select placeholder="请选择案例类别" @change="getTrainingList" clearable @close="form.guideClassId = null"
                 v-model="form.guideClassId"  style="width: 300px;margin-right: 20px;">
        <el-option
            v-for="item in cateGoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        >
        </el-option>
      </el-select>
			<el-input style="width: 300px"
					  placeholder="请输入"
					  v-model="form.name"
					  clearable
					  @clear="getTrainingList"
			>
				<i slot="suffix" class="el-input__icon el-icon-search" style="font-size: 20px;cursor: pointer" @click="getTrainingList"></i>
			</el-input>
		</div>
		
		<div class="report-table">
			<div class="table-header">
				<div class="table-box">资源名称</div>
				<div class="table-box">实验室</div>
				<div class="table-box">实验指导类别名称</div>
				<div class="table-box">上传时间</div>
				<div class="table-box">操作</div>
			</div>
			<div class="tab-body">
				<div class="table-list" v-for="item in tableData" :key="item.id">
					<div class="list-show">{{item.name}}</div>
					<div class="list-show">{{item.laboratoryName}}</div>
					<div class="list-show">{{item.guideClassName}}</div>
					<div class="list-show">{{item.createTime}}</div>
					<div class="list-show">
						<el-button type="text" @click="openSee(item)">查看</el-button>
						<el-button type="text" @click="downloadFile(item.url)">下载</el-button>
					</div>
				</div>
			</div>
		</div>
		
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="1"
					:page-sizes="[5]"
					:page-size="5"
					layout="sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		<el-dialog
				:show-close="false"
				:visible.sync="seeDialog"
				width="40%"
		>
			<div class="dialog-box">
				<div class="box-top">查看实验指导</div>
				<div class="box-body">
					<el-form label-width="80px">
						<el-form-item label="指导名称:">
							<el-input placeholder="请输入资源名称" disabled v-model="seeForm.name"></el-input>
						</el-form-item>
						<el-form-item label="指导内容:">
							<el-input type="textarea" v-model="seeForm.message" disabled placeholder="请输入资源内容(可选)" :rows="2"></el-input>
						</el-form-item>
						<el-form-item label="实验室:">
							<el-input placeholder="请输入实验室" disabled v-model="seeForm.laboratoryName"></el-input>
						</el-form-item>
						
						<el-form-item >
							<el-button type="text" @click="openUrl(seeForm.url,seeForm.id)">查看指导文件</el-button>
						</el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button size="small" @click="seeDialog = false">关 闭</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
    <el-drawer
        size='50%'
        close-on-press-escape
        :visible.sync="dialog"
        :with-header="false">
      <div class="docWrap" v-if="showFile === 0">
        <!-- 预览文件的地方（用于渲染） -->
        <div ref="file"></div>
      </div>
      <iframe :src="fileUrl" v-if="showFile === 1" style="width: 100%;height: 100%"></iframe>
    </el-drawer>
	</div>
</template >

<script >
	import {trainingList } from "../../api/training";
  import request from "../../utils/request";
  import {getGuideClassFindList} from "@/api/laboratory";

  let docx = require("docx-preview");
    export default {
        name: "guidanceResources",
		data(){
            return{
              showFile: null,
              cateGoryList:null,
                form:{
                  guideClassId:null,
                    name: "",
                    pageIndex: 1,
                    pageSize: 5
                },
                tableData:[],
                total:null,
                seeForm:{},
                seeDialog:false,
                dialog:false,
                fileUrl:null,
			}
		},
		mounted() {
            this.getTrainingList()
      this.getcateGoryList()
        },
        methods: {
            async getTrainingList(){
                const { data } = await trainingList(this.form)
                if (data.code === 200){
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
			},
          //查询案例类别
          async getcateGoryList() {
            const {data} = await getGuideClassFindList()
            console.log(data)
            if (data.code === 200) {
              this.cateGoryList = data.data
            }
          },
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getTrainingList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getTrainingList()
            },
            downloadFile(url){
                this.$confirm('下载该实验培训资源, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.open(url, '_blank')
                })
            },
            openSee(item){
                console.log(item)
                this.seeForm = item
                this.seeDialog = true
            },
          openUrl(url, id) {
            this.seeDialog = false
            let parts = url.split(".");
            let extension = parts[parts.length - 1];
            console.log(extension)
            if (extension === 'docx' || extension === 'DOCX') {
              this.dialog = true
              this.showFile = 0
              request({
                url: "/upload/getCultivate/" + id,
                method: 'get',
                responseType: 'blob',
              }).then(resp => {
                docx.renderAsync(resp.data, this.$refs.file); // 渲染到页面
              })
            } else if (extension === 'doc' || extension === 'DOC') {
              this.downLoad(url)
            } else {
              this.dialog = true
              this.showFile = 1
              this.fileUrl = url
            }

          },
          downLoad(url) {
            this.$confirm('下载该模板, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              window.open(url, '_self')
            }).catch(() => {
              this.$message.warning('已取消下载')
            });
          },
            // openUrl(url){
            //     this.seeDialog = false
            //     this.dialog = true
            //     this.fileUrl = url
            // }
        },
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title {
			font-size: 22px;
			color: #333;
		}
		.dialog-box{
			width: 100%;
			min-height: 50vh;
			border-radius: 5px;
			overflow: hidden;
			.box-top{
				width: 100%;
				height: 10vh;
				background-image: linear-gradient(to left, #3591d4 0%, #50b3da 50%, #85f9e6 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26px;
				color: #fff;
			}
			.box-body{
				width: 100%;
				height: 80%;
				padding:5% 10%;
				box-sizing: border-box;
				background-color: #ffffff;
				/deep/.el-input__inner{
					border: none;
					background-color: #ecedef;
				}
				/deep/.el-textarea__inner{
					border: none;
					background-color: #ecedef;
				}
				.form-btn{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.file-list{
					margin-top: 20px;
					width: 100%;
					.file-box{
						margin-top: 10px;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							width: 40%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}
		.report-search{
			width: 100%;
			margin: 30px 0;
			padding: 0 5%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			/deep/.el-input__inner{
				border-radius: 20px;
			}
		}
		.report-table{
			width: 90%;
			margin: 0 auto;
			box-sizing: border-box;
			.table-header{
				width: 100%;
				height: 40px;
				background-color: #7fd1e5;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.table-box{
					width: 20%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18px;
					font-weight: 500;
					color: #333333;
				}
			}
			.tab-body{
				width: 100%;
				background-color: #ffffff;
				padding: 20px 0;
				box-sizing: border-box;
				border-radius: 20px;
				.table-list{
					margin: 10px 0;
					width: 100%;
					padding-bottom: 10px;
					box-sizing: border-box;
					border-bottom: 1px solid #f0f0f0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.list-show{
						width: 20%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 14px;
						color: #666;
					}
				}
			}
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
